@use "../mixins/eui";

.itemList {
  @include eui.scrollBar;

  height: 100%;
  overflow: auto;
  position: relative;

  background-color: var(--euiColorEmptyShade);

  .euiBasicTable {
    border-top: none;
  }

  .hiddenColumn {
    width: 0 !important;
    display: none !important;
  }

  .euiTable {
    position: relative;
    background-color: transparent;
  }

  thead tr {
    background-color: var(--euiColorEmptyShade);
    height: 54px;

    &:first-child {
      border-left: 1px solid var(--euiColorLightShade);
    }
    &:last-child {
      border-right: 1px solid var(--euiColorLightShade);
    }
  }

  tbody tr {
    &:last-child {
      border-bottom: 1px solid var(--euiColorLightShade);
    }
  }

  .euiTableHeaderCell,
  .euiTableHeaderCellCheckbox {
    padding-top: 3px;
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: var(--euiColorEmptyShade);
    border-bottom: none !important;

    box-shadow: inset 0 1px 0 var(--euiColorLightShade), inset 0 -1px 0 var(--euiColorLightShade);
  }

  .euiTableRow {
    font-size: 14px !important;
    height: 48px;

    .column_name {
      cursor: pointer;
      padding-top: 0;
      padding-bottom: 0;

      div span:nth-child(2) {
        overflow: hidden;
      }

      :global(.euiToolTipAnchor) {
        max-width: 100%;
      }
    }

    .copyHostPortText,
    .copyUrlText,
    .copyPublicEndpointText,
    .column_name,
    .column_name .euiToolTipAnchor {
      display: inline-block;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      max-width: 100%;
      vertical-align: top;
    }

    .euiIcon--medium {
      width: 18px;
      height: 18px;
    }

    .column_controls {
      float: right;
      width: 100%;
      display: flex;
      justify-content: flex-end;
      gap: 8px;

      > div, span {
        display: flex;
      }
    }

    .host_port,
    .url,
    .public_endpoint {
      height: 24px;
      line-height: 24px;
      width: auto;
      max-width: 100%;
      padding-right: 34px;
      position: relative;

      * {
        color: var(--textColorShade) !important;
      }

      &:hover .copyHostPortBtn,
      &:hover .copyUrlBtn,
      &:hover .copyPublicEndpointBtn {
        opacity: 1;
        height: auto;
      }
    }

    .copyHostPortBtn,
    .copyUrlBtn,
    .copyPublicEndpointBtn {
      margin-left: 25px;
      opacity: 0;
      height: 0;
      transition: opacity 250ms ease-in-out;
    }

    .copyHostPortText,
    .copyUrlText,
    .copyPublicEndpointText {
      display: inline-block;
      width: auto;
      max-width: 100%;
    }

    .copyPublicEndpointText {
      max-width: calc(100% - 50px);
    }

    .copyHostPortTooltip,
    .copyUrlTooltip,
    .copyPublicEndpointTooltip {
      position: absolute;
      right: 0;
    }

    .column_copy {
      padding-left: 50%;
    }

    .deleteInstancePopover {
      width: 100%;
    }

    .deleteInstanceTooltip {
      margin-right: 10%;
    }

    .editInstanceBtn {
      position: absolute;
      right: 50px;
    }

    &:nth-child(odd) {
      background-color: var(--euiColorEmptyShade);
      .options_icon {
        border: 2px solid var(--euiColorEmptyShade);
      }
    }
    &:nth-child(even) {
      background-color: var(--browserTableRowEven);

      .options_icon {
        border: 2px solid var(--browserTableRowEven);
      }
    }

    .euiTableRowCell,
    .euiTableRowCellCheckbox {
      border-bottom-width: 0;
    }

    @media only screen and (max-width: 767px) {
      height: auto;
    }
  }

  .euiTableCellContent {
    @media only screen and (min-width: 767px) {
      padding-left: 13px;
    }
  }

  .euiTableFooterCell,
  .euiTableHeaderCell {
    color: var(--htmlColor);
  }

  .euiTableHeaderCell {
    .euiTableCellContent__text {
      font-size: 16px !important;
      font-family: "Graphik", sans-serif !important;
      font-weight: 500 !important;
    }

    .euiTableHeaderButton {
      &:hover *,
      &:active *,
      &:focus * {
        color: var(--euiTextColor) !important;
        fill: var(--euiTextColor) !important;
      }
    }
  }
}
